<!DOCTYPE html>
<html>
<head>
<!--    <title>Dashboard</title>-->
<!--    <link rel="shortcut icon" type="image/x-icon" href="/static/func.ico" />-->

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--    <title>Kubernetes Dashboard</title>-->
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">

<!--    namespace 展示效果-->
    <style>
        .namespace {
            margin-top: 10px;
        }
        .namespace select, .namespace option {
            width: 180px;
            height: 40px;
            font-size: 22px;
            color: #2F4056;
        }
        .layui-table-cell {
            height: inherit;
        }
    </style>

</head>
<body class="layui-layout-body">
{% csrf_token %}
<div class="layui-layout layui-layout-admin">
    <div class="layui-header layui-bg-cyan">
        <div class="layui-logo" style="color: white; font-size: 26px; font-weight: bold">Dashboard</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->

        <ul class="layui-nav layui-layout-left">
            <div class="namespace">
                <select name="namespace" id="nsSelect">
                </select>
            </div>

<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">其它功能</a>-->
<!--                <dl class="layui-nav-child">-->
<!--                  <dd><a href="">邮件管理</a></dd>-->
<!--                  <dd><a href="">消息管理</a></dd>-->
<!--                  <dd><a href="">授权管理</a></dd>-->
<!--                </dl>-->
<!--            </li>-->
        </ul>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="/logout">Exit</a></li>
        </ul>

    </div>

    <div class="layui-side layui-bg-black">

        <!--layui-bg-green 可以根据喜好修改主题颜色  https://www.layui.com/doc/element/color.html-->
        <div class="layui-side-scroll layui-bg-black">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree layui-bg-cyan"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                <li class="layui-nav-item"><a href="/" class="layui-icon layui-icon-home"> 平台概述</a>
                </li>

                <li class="layui-nav-item {% block nav-item-1 %}{% endblock %}">
                    <a href="javascript:;" class="layui-icon layui-icon-tree" > Kubernetes</a>
                    <dl class="layui-nav-child">
                        <dd><a href="{% url 'node' %}" class="layui-icon layui-icon-more-vertical" class="{% block nav-this-1-1 %}{% endblock %}"> Nodes</a></dd>
                        <dd><a href="{% url 'namespace' %}" class="layui-icon layui-icon-more-vertical" class="{% block nav-this-1-2 %}{% endblock %}"> Namespaces</a></dd>
                        <dd><a href="{% url 'pv' %}" class="layui-icon layui-icon-more-vertical" class="{% block nav-this-1-3 %}{% endblock %}"> PersistentVolumes</a></dd>
<!--                        <dd><a href="">超链接</a></dd>-->
                    </dl>
                </li>
                <li class="layui-nav-item {% block nav-item-2 %}{% endblock %}">
<!--                    <a href="javascript:; ">工作负载</a>-->
                    <a href="javascript:; " class="layui-icon layui-icon-light"> 工作负载</a>
                    <dl class="layui-nav-child ">
                        <dd><a href="{% url 'deployment' %}" class="layui-icon layui-icon-more-vertical" class="{% block nav-this-2-1 %}{% endblock %}"> Deployments</a></dd>
                        <dd><a href="{% url 'daemonset' %}" class="layui-icon layui-icon-more-vertical" class="{% block nav-this-2-2 %}{% endblock %}"> DaemonSets</a></dd>
                        <dd><a href="{% url 'statefulset' %}" class="layui-icon layui-icon-more-vertical" class="{% block nav-this-2-3 %}{% endblock %}"> StatefulSets</a></dd>
                        <dd><a href="{% url 'pod' %}" class="layui-icon layui-icon-more-vertical" class="{% block nav-this-2-4 %}{% endblock %}"> Pods</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical" > CronJobs-开发中</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical" > Jobs-开发中</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item {% block nav-item-3 %}{% endblock %}">
                    <a href="javascript:; " class="layui-icon layui-icon-rate-half" > 负载均衡</a>
                    <dl class="layui-nav-child ">
                        <dd><a href="{% url 'service' %}" class="layui-icon layui-icon-more-vertical" class="{% block nav-this-3-1 %}{% endblock %}"> Services</a></dd>
                        <dd><a href="{% url 'ingress' %}" class="layui-icon layui-icon-more-vertical" class="{% block nav-this-3-2 %}{% endblock %}"> Ingresses</a></dd>
<!--                        <dd><a href="javascript:;">StatefulSets</a></dd>-->
<!--                        <dd><a href="javascript:;">Pods</a></dd>-->
<!--                        <dd><a href="javascript:;">CronJobs</a></dd>-->
<!--                        <dd><a href="javascript:;">Jobs</a></dd>-->
                    </dl>
                </li>

                <li class="layui-nav-item {% block nav-item-4 %}{% endblock %}">
                    <a href="javascript:; " class="layui-icon layui-icon-senior"> 存储与配置</a>
                    <dl class="layui-nav-child ">
                        <dd><a href="{% url 'pvc' %}" class="layui-icon layui-icon-more-vertical" class="{% block nav-this-4-1 %}{% endblock %}"> PersistentVolumeClaims</a></dd>
                        <dd><a href="{% url 'configmap' %}" class="layui-icon layui-icon-more-vertical" class="{% block nav-this-4-2 %}{% endblock %}"> ConfigMaps</a></dd>
                        <dd><a href="{% url 'secret' %}" class="layui-icon layui-icon-more-vertical" class="{% block nav-this-4-3 %}{% endblock %}"> Secrets</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="" class="layui-icon layui-icon-template"> 节点配置</a></li>
<!--                <li class="layui-nav-item"><a href="">权限配置</a></li>-->
                <li class="layui-nav-item">
                    <a href="javascript:; " class="layui-icon layui-icon-water"> 权限配置</a>
                    <dl class="layui-nav-child ">
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical"> 开发中</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical"> Role</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical"> RoleBinding</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical"> ClusterRole</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical"> ClusterRolebinding</a></dd>
                    </dl>


<!--                <li class="layui-nav-item" ><a href="/github/github" class="layui-icon layui-icon-website"> Github配置开发中</a></li>-->

                <li class="layui-nav-item" ><a href="/github/github" class="layui-icon layui-icon-website"> Github配置</a></li>


                <li class="layui-nav-item">
<!--                    <a href="javascript:; " class="layui-icon layui-icon-app"> 开发市场</a>-->
                     <a href="javascript:; " class="layui-icon layui-icon-app"> 开发进度</a>
                    <dl class="layui-nav-child ">
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical">Namespace创建-完成</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical">PV创建-完成</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical">Deploy创建-完成</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical">Daemon创建-待开发</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical">Stateful创建-待开发</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical">Pods创建-待开发</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical">CronJob-待开发</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical">Job-待开发</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical">Service创建-待开发</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical">Ingress创建-待开发</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical">PVC创建-待开发</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical">CM创建-待开发</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical">Secret创建-待开发</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical">操作日志记录-待开发</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical">Github持久化-待开发</a></dd>
                        <dd><a href="javascript:;" class="layui-icon layui-icon-more-vertical">权限配置-待开发</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>


    <div class="layui-body" style="background-color: #edeff0">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            {% block content %}{% endblock %}
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © toptops.tops - Kubernetes Dashboard
    </div>
</div>
<script src="/static/layui/layui.js"></script>
{% block js %}{% endblock %}
<script>
    //JavaScript代码区域
    layui.use(['element','layer'], function(){
        var element = layui.element;
        var layer = layui.layer;

        // 导入jquery
        var $ = layui.jquery;
        $.ajax({
            type: "GET",
            url: "{% url 'namespace_api' %}",
            timeout: 5000,
            async: false,
            success: function (res) {
                if(res.code == 0) {
                    for(let index in res.data){
                        row = res.data[index];
                        $("#nsSelect").append('<option value=' + row.name + '>' + row.name + '</option>')
                    }
                    // 设置默认命名空间
                    $("#nsSelect").val("default")
                } else {
                    $("#nsSelect").append('<option value="default">default</option>');
                    $("#nsSelect").attr("disabled", "disabled");
                    {#$("#nsSelect").append('<option value=' + res.msg + '>' + res.msg + '</option>')#}
                }
            },
            error: function () {
                layer.msg("服务器接口异常！",{icon: 5})
            }
        });
        // 将当前选择的命名空间保存到本地浏览器session存储，以便其他页面能获取到当前选择的命名空间
        var storage = window.sessionStorage;
        var namespace = storage.getItem("namespace");
        var current_ns = $("#nsSelect").val();
        if (namespace == null) {
            storage.setItem('namespace', current_ns)
        } else {
            $("#nsSelect").val(namespace)
        }

        $('#nsSelect').change(function () {
            var current_ns = $("#nsSelect").val();
            storage.setItem('namespace', current_ns);
            location.reload()   // 点击重新刷新加载页面
        });
    });
</script>
</body>
</html>